<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩布局</title>
    <style>

        .div1 {
            width: 1000px;
            height: 400px;
            /* 1.伸缩布局:指定盒子为伸缩盒子 */
            display: flex;
            /*  2.设置属性调整盒子的布局方式 */
            /*  3.明确方向 */
            /*  调整主轴方向: row / row-reverse / column / column-reverse */
            /*
                默认：水平主轴，方向往右，垂直侧轴，方向往下
                flex-direction：可以调整主侧轴方向
             */
            flex-direction: row;
            /*justify-content: space-between(两端对齐) 、flex-end、flex-start、inherit center*/
            /* space-around：整体平分 */
            justify-content: space-around;

            /* 以不同盒子之间的基线为准 */
            /*  不给高的时候拉伸 */
            /* a调整侧轴方向 */
            /*align-items: baseline;*/
            align-items: center;

            /* 控制是否要换行 nowrap:不换行  wrap */
            /*flex-wrap: nowrap;*/
            /* 堆栈排列 可对应用flex-wrap：wrap后产生的换行进行控制 */
            /*  换行之后对行操作 strent */
            /*align-content: space-between;*/
            /*align-content: stretch;*/

            /*order: ;*/

            background: black;
        }
        .div1 div{
            width: 200px;
            height: 200px;
            background: green;
            text-align: center;
            line-height: 200px;
        }

        .div-1 {
            /* 分配父盒子剩余空间 */
            flex: 2;
            order: 3;
        }

        .div-2 {
            line-height: 300px;
            background: red;
            flex: 1;
            /* 覆盖父元素的align-item */
            align-self: flex-end;
            order: 1;
        }

        .div-1 {
            flex: 3;
            order: 2;
        }

    </style>
</head>
<body>
    <div class="div1">
        <div class="div-1">1</div>
        <div class="div-2">2</div>
        <div class="div-3">3</div>
    </div>
</body>
</html>